<template>
	<view class="view-id-card">
		<g-navbar title="身份证" />
		<view class="main">
			<view class="card-photo-module">
				<view class="photo-item" @click="preview(idCardInfo.id_card_front)">
					<image :src="idCardInfo.id_card_front" mode="aspectFill" class="photo" />
					<view class="icon-wrapper">
						<i class="iconfont icon-full icon" />
					</view>
				</view>
				<view class="photo-item" @click="preview(idCardInfo.id_card_reverse)">
					<image :src="idCardInfo.id_card_reverse" mode="aspectFill" class="photo" />
					<view class="icon-wrapper">
						<i class="iconfont icon-full icon" />
					</view>
				</view>
			</view>
			<view class="card-info-module">
				<view class="title">
					证件信息
				</view>
				<view class="info-item">
					<view class="label">
						姓名:
					</view>
					<view class="value">
						{{idCardInfo.true_name}}
						<i class="iconfont icon-copy icon" @click="copy(idCardInfo.true_name)" />
					</view>
				</view>

				<view class="info-item">
					<view class="label">
						身份证号:
					</view>
					<view class="value">
						{{idCardInfo.id_card_no}}
						<i class="iconfont icon-copy icon" @click="copy(idCardInfo.id_card_no)" />
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import type { IIdCardInfo } from '@/types/card';
	import { ref, Ref } from "vue";
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	const store = useStore();

	const idCardInfo : Ref<IIdCardInfo> = ref({
		id_card_front: '',
		id_card_no: '',
		id_card_reverse: '',
		true_name: '',
	});

	const getIdCardInfo = async () : Promise<void> => {
		await uni.loginManger.$interceptor;
		const data = (await uni.http.POST(REST_URL.getCardList, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
		})).data;
		idCardInfo.value = data.id_card;
	}

	getIdCardInfo()


	const copy = (val : string) => {
		uni.setClipboardData({
			data: val,
			success: () => {
				uni.prompt.$showToast('已复制到剪贴板')
			}
		});
	}

	const preview = (url : string) => {
		uni.previewImage({
			urls: [url],
		})
	}
</script>

<style scoped lang="scss">
	@import "./viewIdCard.scss";
</style>